<template>
  <div>
    <!-- 单曲 -->
    <ul
      class="musiclist"
      v-if="typea==='1'"
    >
      <li
        v-for="(item,index) in songsList"
        :key="index"
      >
        <div class="td"><i class="iconfont icon-bofang"></i></div>
        <div class="td w0"><a href="#">{{item.name}}</a></div>
        <div class="td iconfa">
          <div class="boxaaa icons">
            <a
              href="#"
              class="icn"
            ><i class="iconfont icon-hao"></i></a>
            <a
              href="#"
              class="icn"
            ><i class="iconfont icon-tianjiawenjianjia"></i></a>
            <a
              href="#"
              class="icn"
            ><i class="iconfont icon-fenxiang"></i></a>
            <a
              href="#"
              class="icn"
            ><i class="iconfont icon-xiazai1"></i></a>
          </div>

        </div>
        <div class="td w1">{{item.artists[0].name}}</div>
        <div class="td w2">{{item.album.name}}</div>
        <div class="td">{{item.duration}}</div>
      </li>
    </ul>
    <!-- 歌手 -->
    <ul
      class="artiter"
      v-else-if="typea==='100'"
    >
      <li
        v-for="(item,index) in songsList"
        :key="index"
      >
        <div class="artbox">
          <a href="#">
            <img :src="item.picUrl">
          </a>
        </div>
        <p>
          <a href="#">{{item.name}}</a>
        </p>
      </li>
    </ul>
    <!-- 专辑 -->
    <ul
      class="albums"
      v-else-if="typea==='10'"
    >
      <li
        v-for="(item,index) in songsList"
        :key="index"
      >
        <div class="abbox">
          <a href="#">
            <img :src="item.picUrl">
            <span :title="item.name"></span>
          </a>
          <a
            href="#"
            class="iconfont icon-bofang"
          ></a>
        </div>
        <p class="dec">{{item.name}}</p>
        <p class="auth"><span>{{item.artists[0].name}}</span></p>
      </li>
    </ul>
    <!-- 视频 -->
    <ul
      class="shipin"
      v-else-if="typea==='1014'"
    >
      <li
        v-for="(item,index) in songsList"
        :key="index"
      >
        <div class="shibox">
          <img :src="item.coverUrl">
          <span
            :title="item.title"
            class="msk"
          ></span>
          <p class="bfl">
            <span class="iconfont icon-shexiangtou4"></span>
            {{item.playTime/10000}}万
          </p>
          <p class="time">18:10</p>
        </div>
        <h4>
          <a href="#">{{item.title}}</a>
        </h4>
        <h5>
          <span>{{item.creator[0].userName}}</span>
        </h5>
      </li>
    </ul>
    <!-- 歌词 -->
    <div
      class="srchsongst"
      v-else-if="typea==='1006'"
    >
      <div
        class="geci"
        v-for="(item,index) in songsList"
        :key="index"
      >
        <div class="item">
          <div class="td"><i class="iconfont icon-bofang"></i></div>
          <div class="td w0"><a href="#">{{item.name}}</a></div>
          <div class="td iconfa">
            <div class="boxaaa icons">
              <a
                href="#"
                class="icn"
              ><i class="iconfont icon-hao"></i></a>
              <a
                href="#"
                class="icn"
              ><i class="iconfont icon-tianjiawenjianjia"></i></a>
              <a
                href="#"
                class="icn"
              ><i class="iconfont icon-fenxiang"></i></a>
              <a
                href="#"
                class="icn"
              ><i class="iconfont icon-xiazai1"></i></a>
            </div>

          </div>
          <div class="td w1">{{item.artists[0].name}}</div>
          <div class="td w2">{{item.album.name}}</div>
          <div class="td">{{item.duration}}</div>
        </div>
        <div class="lyric">
          <div class="lrcbufen">
            <p> <span class="s-fc7">{{item.artists[0].name}}</span> </p>
            <!-- 循环显示歌词 -->
            <p
              v-for="(it,index2) in lyricsObjArr2"
              :key="index2"
            > {{it.lyric}}
              <br></p>
          </div>
          <div class="crl">
            <a href="#">展开<i class="iconfont icon-down"></i></a>
          </div>
        </div>
      </div>

    </div>
    <!-- 歌单 -->
    <!-- 声音主播 -->
    <!-- 用户 -->
  </div>
</template>

<script>
import axios from 'axios'
import { connect } from 'net';
import { constants } from 'os';
export default {
  data () {
    return {
      songsList: [
      ],
      songtolnum: 0,
      typea: '1',
      key: '许嵩',
      lyricsObjArr2: []
    }
  },

  created () {
    this.getresult();
  },
  methods: {
    // 获取歌词
    async gecia (i) {
      console.log(i)
      let res = await axios.get('https://autumnfish.cn//lyric?id=' + this.songsList[i].id)
      const regNewLine = /\n/
      const lineArr = res.data.lrc.lyric.split(regNewLine) // 每行歌词的数组
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      const lyricsObjArr = [];
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)
        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
        obj.uid = Math.random().toString().slice(-6)
        if (obj.lyric === '') {
          console.log('这一行没有歌词')
        } else {
          lyricsObjArr.push(obj)
        }
      })
      console.log('----------------------')
      this.lyricsObjArr2 = lyricsObjArr;
      console.log(this.lyricsObjArr2)
    },
    formatLyricTime (time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./

      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    },
    async getresult () {
      this.typea = this.$route.query.type;
      this.key = this.$route.query.seakey;
      console.log('song获取到的地址：', 'https://autumnfish.cn//search?keywords=' + this.key + '&type=' + this.typea)
      let res = await axios.get('https://autumnfish.cn//search?keywords=' + this.key + '&type=' + this.typea)
      if (this.typea === '1' || this.typea === '1006') {
        this.songsList = res.data.result.songs
        this.songtolnum = res.data.result.songCount
      }
      if (this.typea === '10') {
        this.songsList = res.data.result.albums
        this.songtolnum = res.data.result.albumCount
      }
      if (this.typea === '100') {
        this.songsList = res.data.result.artists
        this.songtolnum = res.data.result.artistCount
      }
      if (this.typea === '1000') {
        this.songsList = res.data.result.playlists
        this.songtolnum = res.data.result.playlistCount
      }
      if (this.typea === '1002') {
        this.songsList = res.data.result.userprofiles
        this.songtolnum = res.data.result.userprofileCount
      }
      if (this.typea === '1009') {
        this.songsList = res.data.result.djRadios
        this.songtolnum = res.data.result.djRadiosCount
      }
      if (this.typea === '1014') {
        this.songsList = res.data.result.videos
        this.songtolnum = res.data.result.videoCount
      }
      this.chuanfa()
    },
    chuanfa () {
      this.$emit('findcount', this.songtolnum, this.typea)
    }
  }
}
</script>

<style lang="less" scoped>
// ------------歌曲
.musiclist {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
  margin-top: 20px;
  a {
    text-decoration: none;
    font-size: 12px;
    color: #333;
  }
  li {
    padding: 10px 10px 8px 18px;
    border: 1px solid #fff;
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: #fff;
    .td {
      margin-right: 5px;
      .icn {
        margin-right: 8px;
        margin-bottom: 3px;
      }
    }
    .w0 {
      width: 370px;
    }
    .w1 {
      width: 15%;
      margin-right: 12px;
    }
    .w2 {
      width: 18%;
      margin-right: 12px;
      min-height: 16px;
    }
    .icons {
      visibility: hidden;
    }
  }
  li:odd {
    background: #f7f7f7;
    border-color: #f7f7f7;
  }
  li:hover {
    .icons {
      visibility: visible;
    }
  }
}
// ------------歌手
.artiter {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 130px;
    height: 154px;
    list-style: none;
    padding: 0 0 30px 24px;
    .artbox {
      width: 130px;
      height: 130px;
      border: 1px solid #666;
      a {
        text-decoration: none;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    p {
      margin-top: 8px;
      a {
        text-decoration: none;
        display: inline-block;
        max-width: 85%;
        vertical-align: middle;
      }
    }
  }
}
// ------------专辑
.albums {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 153px;
    height: 178px;
    padding: 0 0 30px 33px;
    list-style: none;
    .abbox {
      width: 130px;
      height: 130px;
      position: relative;
      a {
        text-decoration: none;
        display: block;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        span {
          position: absolute;
          top: 0;
          left: 0;
          width: 153px;
          height: 130px;
          background-image: url(../../../assets/image/coverall.png);
          background-position: 0 -845px;
        }
      }
      .iconfont {
        font-size: 23px;
        position: absolute;
        right: 3px;
        bottom: 3px;
        color: #f7f7f7;
      }
    }
    .dec {
      cursor: pointer;
      margin: 8px 0 3px;
      font-size: 14px;
      vertical-align: middle;
      color: #000;
    }
    .auth {
      cursor: pointer;
      margin: 0;
      span {
        display: inline-block;
        max-width: 85%;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        color: #333;
      }
    }
  }
}
// ------------视频
.shipin {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 159px;
    padding: 0 0 40px 26px;
    line-height: 1.5;
    overflow: hidden;
    list-style: none;
    .shibox {
      width: 159px;
      height: 90px;
      position: relative;
      img {
        width: 100%;
        height: 90px;
      }
      .msk {
      }
      .bfl {
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 5px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        font-size: 12px;
        box-sizing: border-box;
        text-align: right;
        text-shadow: -2px 1px rgb(0 0 0 / 40%);
        span {
          font-size: 18px;
        }
      }
      .time {
        margin: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 5px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        text-shadow: -2px 1px rgb(0 0 0 / 40%);
      }
    }
    h4 {
      width: 100%;
      height: auto;
      margin: 7px 0 1px;
      border: none;
      font-size: 14px;
      font-weight: normal;
      a {
        display: inline-block;
        width: 100%;
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        color: #000;
        font-size: 14px;
      }
    }
    h5 {
      margin: 0;
      width: 100%;
      font-weight: normal;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
      }
    }
  }
}
// 歌词
.srchsongst {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
  margin-top: 20px;
  a {
    text-decoration: none;
    font-size: 12px;
    color: #333;
  }
  .item {
    padding: 10px 10px 8px 18px;
    border: 1px solid #fff;
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: #fff;
    .td {
      margin-right: 5px;
      .icn {
        margin-right: 8px;
        margin-bottom: 3px;
      }
    }
    .w0 {
      width: 370px;
    }
    .w1 {
      width: 15%;
      margin-right: 12px;
    }
    .w2 {
      width: 18%;
      margin-right: 12px;
      min-height: 16px;
    }
    .icons {
      visibility: hidden;
    }
  }
  .item:hover {
    .icons {
      visibility: visible;
    }
  }
  .lyric {
    margin: 10px 0 18px 52px;
    color: #666;
    line-height: 23px;
    word-wrap: break-word;
    word-break: break-all;
    .lrcbufen {
      .s-fc7 {
        color: #0c73c2;
      }
      p {
        margin: 0;
      }
    }
    .crl {
      margin-top: 5px;
      a {
        text-decoration: none;
        color: #666;
        .iconfont {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
